@import "lib.styl"

.date-input {
  display:inline-block;
  position relative
  &.isrange {
    input.default {
      width: 180px;
    }
  }
  input.default{
    border_box();
    outline: 0;
    width: 116px;
    height: 40px;
    border: 1px solid #e1e1e1;
    font-size: 12px;
    color: #656565;
    line-height: 40px;
    padding-left: 10px;
    &.act {
      border-color: #316ccb;
    }
    &.not-editable {
      background-color #f5f5f5
      border-color: #e1e1e1
      // cursor not-allowed
    }
  }
  i.default{
    display: inline-block;
    position: absolute;
    right: 11px;
    top: 12px;
    width: 15px;
    height: 15px;
    background: IMG;
    background_sizing(15px 210px);
    background-position: 0 0;
    z-index: 2
    &:hover {
      background-position: 0 -385px
      &.not-editable {
        background-position: 0 0
      }
    }
  }
}
.datepicker{
  font-size font
  line-height 18px
  text-align center
  background-color: #ffffff;
  position: absolute;
  z-index: 101;
  box_shadow(0 0 16px 0 rgba(197,197,197,.5))
  .calendar-mon{
    padding 0 16px;
    height: 48px;
    border_box()
    .left-date {
      float: left;
      width: 50%;
      border_box()
      clearfix()
      padding: 16px 0;
      &>span{
        float: left;
        margin-top: -2px;
        font-size: 14px;
        display inline-block
        width 118px
      }
    }
    .right-date {
      float: right;
      width: 50%;
      border_box()
      clearfix()
      padding: 16px 0;
      border-left: 1px solid #f1f1f1;
      position: relative;
      left: 1px;
      &>span{
        float: right;
        margin-top: -2px;
        font-size: 14px;
        display inline-block
        width 118px
      }
      i {
        float: right
      }
    }
    .date {
      padding: 16px 0;
      border_box()
      clearfix()
      &>span{
        float: left;
        margin-top: -2px;
        font-size: 14px;
        display inline-block
        width 118px
      }
    }
    i {
      float left
      display inline-block
      font-style normal
      font-weight bold
      cursor pointer
      width 16px
      height 16px
      background-image IMG
      position relative
      top 2px
      background_sizing(15px 210px)
      background-repeat:no-repeat
      &.prev-year {
        background-position 0px -56px
        margin-right: 12px;
        &:hover {
          background-position 0px -39px
        }
      }
      &.prev-mon {
        background-position 3px -124px
        &:hover {
          background-position 3px -107px
        }
      }
      &.next-mon{
        background-position 3px -158px
        margin-right: 12px;
        &:hover {
          background-position 3px -141px
        }
      }
      &.next-year{
        background-position 0 -90px;
        &:hover {
          background-position 0px -73px
        }
      }
    }
  }
  .calendar-btn{
    text-align right
    border_box();
    border-top: 1px solid #f1f1f1;
    height: 40px;
    width: 100%;
    line-height: 40px;
    span {
      font-size: 12px;
      color: #316ccb;
      cursor pointer
      margin-right: 16px;
      &.gray {
        color #c5c5c5
        cursor not-allowed
      }
    }
  }
}
.hs-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0);
  z-index: 100
}
